<template>
	<div class="ele-body">
		<a-card :bordered="false" title="返仓接收信息">
			<receipts_back_receive :receiptsDetail="receipts_detail" />
			<div class="margin-y-30">
				<a-space>
					<a-input-search placeholder="请输入条形码" enter-button="确定" size="middle" v-model:value="codeVal" @search="onSearch"/>
					<!-- <a-button class="btn" @click="showLuru = true"><span>批量录入</span></a-button>
					<a-button type="primary" class="ele-btn-icon" @click="toSelect()"><span>选择货品</span></a-button> -->
				</a-space>

				<a-form
					class="margin-y-15"
					:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="10" :sm="10" :xs="10">
							<goodsTable :total="total" :tableData="tableData" :optShow="false" @action="action" @getNext="getDetail" />
						</a-col>
						<a-col :md="14" :sm="14" :xs="14">
							<detail ref="detailRef" :code="query.code" :goodsCode="goodsCode" v-if="goodsCode" />
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>
		<!-- 选择货品弹窗 -->
		<!-- <select-goods v-if="showCheck" v-model:visible="showCheck" @load="getDetail" @done="done" /> -->
		<!-- 批量录入条码弹窗 -->
		<!-- <luru v-if="showLuru" v-model:visible="showLuru" @luOpt="luOpt" /> -->
	</div>
</template>
<script setup>
import { ref, reactive, unref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { DownOutlined, UpOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { actionFn } from '@/utils/action.js';
import receipts_back_receive from '@/components/jewelry/receipts_back_receive.vue';
import goodsTable from '@/components/jewelry/goodsTable.vue';
import selectGoods from '@/components/jewelry/select-goods.vue';
import luru from '@/components/jewelry/luru.vue';
import detail from './components/detail.vue';
import { uploadUrl } from '@/config/setting';
import {receipts_back_receive_detail,add_goods, del_goods,batch_enter} from '@/api/jewelry/receipts_back_receive';
const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);
console.log(query);
const loading = ref(false);
const showCheck = ref(false);
const goodsCode = ref(null);
const receipts_detail = ref({});
const goods = ref({});
const visible = ref(false);
//货品list
const tableData = ref([]);
const total = ref(0);

const codeVal = ref(null);

const detailRef = ref(null);
const showLuru = ref(false);


const onSearch = ()=>{
	let arr = [];
	arr.push(codeVal.value);
	add_goods({ code: query.code, goods_code: arr })
		.then(res => {
			message.success(res.msg);
			//getDetail();
		})
		.catch(e => {
			message.error(e);
		});
};
const action = row => {
	console.log('row', row);
	if (row.action == 'look') {
		lookGoods(row);
	} else if (row.action == 'del') {
		delGoods(row);
	}
};
const lookGoods = row => {
	goodsCode.value = row.code;
	detailRef.value.change(goodsCode.value);
};
const delGoods = row => {
	Modal.confirm({
		title: '提示',
		content: '确认删除？',
		okText: '确认',
		cancelText: '取消',
		onOk: () => {
			del_goods({ code: query.code, goods_code: row.code })
				.then(res => {
					message.success(res.msg);
					getDetail();
				})
				.catch(e => {
					message.error(e);
				});
		}
	});
};
const luOpt = (val)=>{
	console.log('val', val);
	batch_enter({ code: query.code, goods: val })
		.then(res => {
			console.log('res', res);
			message.success(res.msg);
			getDetail();
		})
		.catch(e => {
			message.error(e);
		});
};

//主石信息
const table1 = reactive({
	loading: false,
	tableData: [
		{
			type: 1,
			name: '',
			gem_category_name: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});
//副石信息
const table2 = reactive({
	loading: false,
	tableData: [
		{
			type: 2,
			name: '',
			gem_category_name: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});

onMounted(() => {
	getDetail(1);
});
const getDetail = (page) => {
	receipts_back_receive_detail({ code: query.code, page:page }).then(res => {
		total.value = res.goods.total;
		goods.value = res.goods.data[0];
		res.goods.data.forEach((item, index)=>{
			item.sku_info.forEach((m, mindex)=>{
				item[m.column] = (m.column_type == 'select' || m.column_type == 'selectajax' || m.column_type == 'selectajaxlike') ? m.value_name : m.value;
			})
		})
		if(res.goods.data.length>0){
			goodsCode.value = res.goods.data[0].code;
			tableData.value = res.goods.data;
		}
		receipts_detail.value = res.receipts_detail;
	});
};
const toSelect = () => {
	showCheck.value = true;
};

const done = form => {
	let data = {
		url:'/jewelry/receipts_distribute/add_goods'
	}
	actionFn(data, form, reloadTable);
};
const reloadTable = () => {
	showCheck.value = false;
	getDetail();
};
/* 更新visible */
const updateVisible = value => {
	console.log('value', value);
	visible.value = value;
};
</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 440px !important;
	height: 180px !important;
	background-color: #fafafa;
	border: 1px dashed #d9d9d9;
	.ant-upload {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
}
</style>
